import styles from './index.module.less'
import CircularImg from '@/assets/report/department/circularLeft.png'
import ArrowImg from '@/assets/report/department/arrowLeft.png'
import type { SwiperItemProps } from '../../interface'
import { observer } from 'mobx-react'
export const TeacherTrainPage = observer((props: SwiperItemProps) => {
    const {
        current,
        itemIndex,
        store: { dataSource },
    } = props
    const { student_foster_module } = dataSource || {}
    const isActive = current === itemIndex

    return (
        <div className={styles.train}>
            <div className={isActive ? styles.active_train_wrapper : styles.train_wrapper}>
                <div className={styles.train_wrapper_content}>
                    <p>
                        <span>2024</span>，在<span className={styles.project}>师资培养</span>上
                    </p>
                    <p>{student_foster_module?.region_desc}</p>
                    <p>
                        合计举办<span>{student_foster_module?.total_group_num}</span>
                        期师资培训班(含提升班)
                    </p>
                    <p>
                        共<span>{student_foster_module?.total_teacher_num}</span>名讲师参训
                    </p>
                    <div className={styles.line} />
                    <p className={styles.sortText}>创业培训 师资先行</p>
                    <p className={styles.sortText}>
                        {student_foster_module?.region}着力打造师资队伍
                    </p>
                    <p className={styles.sortText}>为创业培训讲师提供发挥个人价值的舞台</p>
                </div>
            </div>
            <img
                src={ArrowImg}
                className={isActive ? styles.active_train_arrow : styles.train_arrow}
            />
            <img src={CircularImg} className={styles.train_circular} />
        </div>
    )
})

export default TeacherTrainPage
